.Search {
  :global(.ant-input-group-addon) {
    background-color: transparent;
  }

  :global(.ant-btn) {
    border: none;
    background-color: transparent;
  }
}

.SwitchButton {
  background-color: transparent;

  & :global(.ant-segmented-thumb) {
    border-radius: 50px;
    @apply bg-grey2;
    box-shadow: none;
  }

  & :global(.ant-segmented-item) {
    border-radius: 50px;
  }

  & :global(.ant-segmented-item-selected) {
    border-radius: 50px;
    box-shadow: none;
    @apply bg-grey2;
  }

  & :global(.ant-segmented-item-label) {
    padding: 0 20px;
    height: 46px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    font-weight: 700;
    overflow: visible;
  }
}

.UpFile {
  :global(.ant-upload) {
    width: 100%;
    transition: all ease-in 300ms !important;
  }
}

.picturecls {
  :global(.ant-upload) {
    width: 100% !important;
  }
}

.PreviewImage {
  :global(.ant-modal-content) {
    @apply p-0;
  }

  &:hover {
    :global(.swiper-button-prev),
    :global(.swiper-button-next) {
      @apply opacity-100;
    }

    :global(.swiper-button-disabled) {
      @apply !opacity-30;
    }
  }

  :global(.swiper-button-disabled) {
    @apply !opacity-0 transition-opacity;
  }

  :global(.swiper-button-prev),
  :global(.swiper-button-next) {
    @apply rounded-full w-11 h-11 shadow-sm bg-white/50 opacity-0;
    @apply transition-opacity;
  }

  :global(.swiper-button-prev)::after,
  :global(.swiper-button-next)::after {
    @apply text-font2 text-lg;
  }
}

.PreviewCard {
  :global(.swiper-button-prev),
  :global(.swiper-button-next) {
    @apply opacity-0 transition-opacity duration-300;
  }

  :global(.swiper-button-prev)::after,
  :global(.swiper-button-next)::after {
    @apply text-font text-3xl;
  }

  &:hover {
    @apply cursor-zoom-in;

    :global(.swiper-button-prev),
    :global(.swiper-button-next) {
      @apply opacity-100;
    }
  }
}
